<template>
  <div class="userinfo_control">
    <div class="es-card">
      <div class="es-card-body">
        <div class="user_info">
          <div class="user_info_header">
            <div class="es-avatar">
              <i class="es-avatar-image">
                <img :src="data.avatar" />
              </i>
            </div>
            <h1>{{ data.nickName }}</h1>
            <p>{{ data.location }}</p>
            <div role="radiogroup" class="es-rate">
              <div role="radio" class="es-rate__item">
                <i
                  class="es-badge__wrapper es-iconfont icon-favorite-filling es-rate__icon es-rate__icon--full"
                >
                </i>
              </div>
              <div role="radio" class="es-rate__item">
                <i
                  class="es-badge__wrapper es-iconfont icon-favorite-filling es-rate__icon es-rate__icon--full"
                >
                </i>
              </div>
              <div role="radio" class="es-rate__item">
                <i
                  class="es-badge__wrapper es-iconfont icon-favorite-filling es-rate__icon es-rate__icon--full"
                >
                </i>
              </div>
              <div role="radio" class="es-rate__item">
                <i
                  class="es-badge__wrapper es-iconfont icon-favorite-filling es-rate__icon es-rate__icon--full es-rate__icon--disabled"
                >
                </i>
              </div>
              <div role="radio" class="es-rate__item">
                <i
                  class="es-badge__wrapper es-iconfont icon-favorite-filling es-rate__icon es-rate__icon--full es-rate__icon--disabled"
                >
                </i>
              </div>
            </div>
          </div>
          <div class="user_info_content">
            <button class="es-button es-round">Edit Info</button>
            <div
              class="es-divider es-divider-horizontal es-divider-default"
            ></div>
            <div class="user_provied">
              <h5>{{ data.nickName }} provided</h5>
              <ul>
                <li>
                  Email:
                  <a :href="'mailto:' + data.email" target="_blank">{{
                    data.email
                  }}</a>
                </li>
                <li>
                  Phone: <a href="javascript:;">{{ data.phone }}</a>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "UserInfoControl",
  props: {
    data: {
      type: Object,
      default() {
        return {};
      },
    },
  },
};
</script>

<style lang="scss">
.userinfo_control {
  padding: 0.625rem 0;
  .es-card {
    border: 0;
    box-shadow: 0px 0px 2.5rem rgb(29 58 83 / 10%) !important;
    margin: 0 0.9375rem;
    overflow: hidden;
    .es-card-body {
      justify-content: center;
      align-items: center;
      display: flex;
      flex-direction: column;
      h1 {
        font-size: 2rem;
        margin: 0.625rem 0 0;
      }
      p {
        margin: 0.625rem 0;
      }
      .es-avatar {
        padding: 0.625rem;
        width: 7rem;
        height: 7rem;
        border-radius: 100%;
        box-shadow: 0px 0px 2.5rem rgb(29 58 83 / 10%) !important;
        background-color: var(--white);
      }
      .es-avatar-image {
        width: 100%;
        height: 100%;
        border-radius: 100%;
      }
      .user_info {
        width: 100%;
        .user_info_header {
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          margin: 0 0 0.625rem 0;
        }
        .user_info_content {
          text-align: center;
          .user_provied {
            text-align: left;
            ul {
              list-style: inside;
              li {
                list-style: inside;
              }
            }
          }
        }
      }
    }
  }
}
</style>
